<template>
  <div class="home">
    <gltitle :is_mt="true" :is_notice="false" :is_back="true" :is_name="true" :title="title"></gltitle>
    <div class="container">
     <div class="setBox flex" @click="show = true">
         <div class="n">{{ $t('page4.doc89') }}:</div>{{typeName}}<img src="../../assets/images/ico_la.png" alt="">
     </div>



        <div class="main">
        <div class="empty db rel" style="z-index: 3;" v-show="emptyShow" >
            <div class="flexs">
                <van-empty
                    class="custom-image"
                    :image="require('../../assets/images/Group12.png')"
                    :description="$t('page1.doc45') "
                />
            </div>
        </div>


        <van-pull-refresh v-model="refreshing" :success-text="$t('load.refreshed')"
                          @refresh="onRefresh(0)"
                          head-height="100"
                          v-if="!emptyShow"
        >


            <van-list
                v-model="loading"
                :finished="finished"
                :finished-text="$t('load.no_more')"
                :loading-text="$t('load.loading')"
                @load="onLoad"
                :immediate-check="check"
            >

            <ul class="list">
            <li v-for="(item,k) in datalist" :key="k">
                <div class="income">
                    <div class="img"><img src="../../assets/images/licai/ico1.png" alt=""></div>
                    <div class="s">{{ $t('page.doc122') }}: {{item.totalIncome}}</div>
                </div>
                <div class="box">
                    <div class="name">{{ item.productName }}</div>
                    <ul>
                        <li>
                            <div class="n">{{ $t('page4.doc90') }}</div>
                            <div class="s">{{item.startDate}}</div>
                        </li>
                        <li>
                            <div class="n">{{ $t('page4.doc91') }}</div>
                            <div class="s">{{item.endDate}}</div>
                        </li>
                        <li>
                            <div class="n">{{ $t('page4.doc92') }}</div>
                            <div class="s">{{ item.orderAmount }}</div>
                        </li>
                        <li>
                            <div class="n">{{ $t('page4.doc93') }}</div>
                            <div class="s">{{item.days}} {{ $t('page.doc105') }}</div>
                        </li>
                        <li>
                            <div class="n">{{ $t('page4.doc94') }}</div>
<!--                            状态(-1:已驳回, 0:审核中, 1:进行中, 10:已完成)-->

                            <div class="s c1" v-if="item.status ==  -1">{{ $t('page4.doc95') }}</div>
                            <div class="s c1" v-if="item.status ==  0">{{ $t('page4.doc96') }}</div>
                            <div class="s c1" v-if="item.status ==  1">{{ $t('page4.doc97') }}</div>
                            <div class="s c1" v-if="item.status ==  10">{{ $t('page4.doc98') }}</div>
                        </li>
                        <li>
                            <div class="n">{{ $t('page4.doc99') }}</div>
                            <div class="s">{{item.dailyIncome}}</div>
                        </li>
                        <li>
                            <div class="n">{{ $t('page4.doc100') }}</div>
                            <div class="s c2">{{item.totalIncome}}</div>
                        </li>
                    </ul>
                </div>
            </li>

        </ul>

            </van-list>
        </van-pull-refresh>

        </div>

    </div>


      <van-popup v-model="show" round position="bottom" >
          <van-picker
                  :title="$t('page.doc9')"
                  show-toolbar
                  :columns="columns"
                  @confirm="onConfirm"
                  @cancel="onCancel"
                  item-height=".8rem"
                  :confirm-button-text="$t('page.doc83')"
          :cancel-button-text="$t('page4.doc63')"
          />
      </van-popup>
  </div>
</template>

<script>

export default {

  data() {
    return {
      title:this.$t('page4.doc69'),
        show:false,
        columns: [this.$t('page4.doc101'),this.$t('page4.doc102'),this.$t('page4.doc103'),this.$t('page4.doc104'),this.$t('page4.doc105')],
        typeName: this.$t('page4.doc101'),
        type: '',
        id:this.$route.query.id,

        datalist:[],
        loading: false,
        finished: false,

        totalPage: "",
        pageSize: 0,
        refreshing: false,
        emptyShow:false,
        datalistNum:0,
        check:true,

    };
  },
  created() {

  },
  mounted() {
      if(this.id == 1){
          this.title = this.$t('page4.doc70')
          document.title = this.$t('page4.doc70')
      }else{
          this.title = this.$t('page4.doc73')
          document.title = this.$t('page4.doc73')
      }
  },
  methods: {
      onConfirm(value, index) {
          // 状态(不传:全部, -1:已取消, 0:审核中, 1:进行中, 10:已完成)

          this.show = false
          this.typeName = value
          if(index == 0){
              this.type = ''
          }else if(index == 1){
              this.type = 1
          }else if(index == 2){
              this.type = 10
          }else  if(index == 3){
              this.type = -1
          }else  if(index == 4){
              this.type = 0
          }
          this.onTab()
      },
      onCancel() {
          this.show = false
      },

      onTab(){
          document.documentElement.scrollTop = 0;
          document.body.scrollTop = document.documentElement.scrollTop = 0;
          this.pageSize = 0
          this.totalPage = ""
          this.finished = false
          this.loading = true
          this.datalist = []
          this.emptyShow = false
          this.onLoad()

      },


      onLoad() {
          setTimeout(() => {
              if (this.refreshing) {
                  this.datalist = []
                  this.refreshing = false;
              }
              this.getlist();
          },1000)
      },
      onRefresh() {
          this.finished = false
          this.loading = true

          this.pageSize = 0
          this.totalPage = ""

          this.onLoad();
      },


      getlist(){
          let url = ''
          if(this.id == 1){
              url = this.URL.financial.record
          }else{
              url = this.URL.invest.record
          }




          this.pageSize = this.pageSize + 1;

          if (this.pageIndex == this.totalPage) {
              this.loading = false;
              this.finished = true

              return;
          }

          this.$post(url, {
              status:this.type,
              page:this.pageSize,
              pageSize:10
          }).then((res) => {
              if (res.code == 0) {
                  if(res.code == 2001){
                      this.loading = true;
                      this.finished = false
                      this.emptyShow = true
                      return
                  }
                  if(res.data.list.length==0){
                      this.emptyShow = true
                  }
                  this.totalPage = res.data.page.totalPage;
                  this.pageIndex = res.data.page.index;

                  this.datalistNum = res.data.page.count

                  let initData = res.data.list;
                  this.datalist.push(...initData);
                  this.loading = false;

              } else {
                  this.$toast(res.message);
              }
          });
      },




      path_url(url){
      this.$router.push({
        path:url,
        query:{
        }
      });
    },
  },
};
</script>


<style lang="less" scoped>
.setBox {
  padding: .5rem 0;
  text-transform: capitalize;
  align-items: center;
  img {
    height: .12rem;
    margin-left: .16rem;
  }
  .n {
    color: rgba(255, 255, 255, 0.60);
    margin-right: .16rem;
  }
}
.list {
  >li {
    border-radius: .2rem;
    margin-bottom: .28rem;
    background: linear-gradient(90deg, #7B02FE 0%, #0570FD 100%);
    .income {
      height: 1.08rem;
      align-items: center;display: flex;justify-content: space-between;
      padding: 0 .32rem;
      color: #fff;
      font-size: .32rem;
      img {
        height: .48rem;
      }
    }
    .box {
      border-radius: .2rem;
      background: #1A202E;
      padding: .32rem;
      color: #fff;
      .name {
        color: #FFF;
        font-size: .32rem;
        font-weight: 500;
        text-transform: capitalize;
        padding: .14rem 0;
      }
      li {
        padding: .14rem 0;
        text-transform: capitalize;display: flex;
        align-items: center;justify-content: space-between;
        .n {
          color: rgba(255, 255, 255, 0.50);
          margin-right: .16rem;
        }
      }
    }
  }
}
.main {
}
</style>